<template>
  <div class="main" ref="remove">
    <div class="univDetailWrap" ref="btnImg" v-show="showPage">
      <div v-show="syStyle && showBannerImg" class="abcdImg">
        <img style="border: none;" class="unviBg" v-lazy="univData.image" alt="" />
        <span v-show="hasBack" class="backTs" @click="goback" v-hide>
          <i class="imgIcon"></i>
        </span>
      </div>
      <!-- <goBack></goBack>	 -->
      <div class="back" v-show="syStyle === false || showBannerImg === false">
        <div :class="['shadow-back', !syStyle ? 'whites' : '']">
          <div class="backboxs" @click="goback" v-if="hasBack" v-hide>
            <i class="imgIcon"></i>
            <span class="back">返回</span>
          </div>
          <div class="backboxs" v-if="!hasBack && !syStyle">
            <!-- <i class="imgIcon"></i> -->
            <span class="back">{{ schoolName }}</span>
          </div>
        </div>
      </div>
      <scroller ref="scrollerBottom" style="top: 46px;">
        <div>
          <div class="univDetail">
            <div ref="boxHeight">
              <div v-show="showBannerImg" style="width:100%;height: 2.8rem;opacity: 0;"></div>
              <div class="topWrap" style="position: relative;">
                <div style="position: absolute;left: 0;bottom: 0;width: 100%;height: 95%;background: #f9f9f9;z-index: -2;"></div>
                <div :class="['univBar', collsMuen ? 'univCollHei' : '']">
                  <div class="univTopBar flex-h" style="align-items:initial">
                    <div class="left">
                      <img :src="univData.icon" alt="" />
                    </div>
                    <div class="right flex1">
                      <span class="sp1" :style="schoolName.length > 6 ? 'font-size: 0.34rem;' : 'font-size: 0.4rem;'">{{ schoolName }}</span>
                      <span class="sp2">{{ univData.feature }}</span>
                    </div>
                    <span @click="follow(univData)" :class="['sp0', univData.followStatus ? 'sp3' : 'sp4']">{{ univData.followStatus === 1 ? '+关注' : '已关注' }}</span>
                  </div>
                  <div class="univBotBar" v-show="showBot1">
                    <div v-show="univData.telephone">
                      <span class="flex-h univspn" @click="call(univData.telephone)">
                        <i class="imgIcon icon_phone"></i>
                        <a class="flex1">{{ univData.telephone }}</a>
                      </span>
                      <span class="flex-h univspn">
                        <i class="imgIcon icon_add"></i>
                        <b style="margin-left: 0.16rem;" class="flex1">{{ schoolAdress }}</b>
                      </span>
                      <span class="flex-h univspn" @click="goweb(schoolWeb, schoolName, univData.feature, univData.icon)">
                        <i class="imgIcon icon_network"></i>
                        <b style="margin-left: 0.16rem;line-height: 0.3rem;word-wrap:break-word" class="flex1">{{ schoolWeb }}</b>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="collagesBox flex-h" @click="crimp">
                  <span class="flex1 co1">联系方式</span>
                  <span class="co2">
                    <i :class="['imgIcon', collsMuen ? 'collsimg1' : 'collsimg2']"></i>
                  </span>
                </div>
              </div>
            </div>
            <div ref="tabsHegiht" :class="syStyle == true">
              <div class="botWrap">
                <div class="tabs flex-h">
                  <span class="flex1" v-for="(item, index) in tabs" :class="{ active: index == num }" @click=";(num = index), tabChange('select' + (index + 1))" :key="index">{{ item.title }}</span>
                </div>
              </div>
            </div>
            <div class="tabCon">
              <keep-alive>
                <component v-bind:is="tabView" :schoolNames="schoolName"></component>
              </keep-alive>
            </div>
          </div>
          <div style="width: 100%;height: 46px;"></div>
        </div>
      </scroller>
    </div>
    <div v-show="syStyle == false" style="position: fixed;left: 0;top: 46px;width: 7.5rem;">
      <div class="botWrap1">
        <div class="tabs1 flex-h">
          <span class="flex1" v-for="(item, index) in tabs" :class="{ active: index == num }" @click=";(num = index), tabChange('select' + (index + 1))" :key="index">{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { followUser, academyServiceDetail } from '~/api/colleges'
import ls from 'store2'
import { backAppOrWx } from '~/common/common'
export default {
  components: {
    select1(resolve) {
      require(['./components/generalSituation'], resolve)
    },
    select2(resolve) {
      require(['./components/professional'], resolve)
    },
    select3(resolve) {
      require(['./components/admissionScore'], resolve)
    },
    select4(resolve) {
      require(['./components/recruitStudents'], resolve)
    },
    select5(resolve) {
      require(['./components/admissionScoreZj'], resolve)
    },
  },
  data() {
    return {
      hasBack: true,
      showPage: false,
      showBannerImg: true,
      showBot1: true,
      abctest: [],
      schoolName: '',
      schoolAdress: '',
      schoolWeb: '',
      univData: [],
      univDesc: [],
      tabs: [
        {
          title: '学校概况',
        },
        {
          title: '专业介绍',
        },
        {
          title: '录取分数',
        },
        {
          title: '招生章程',
        },
      ],
      tabView: 'select1',
      num: 0,
      tabIndex: 0,
      isShow: false,
      syStyle: true, //滑动时的效果,使用v-bind:style="deleteSlider"
      collsMuen: true,
    }
  },
  methods: {
    call(tel) {
      if (this.commonJs.checkTerminal() == 'ios') {
        window.webkit.messageHandlers.CallTelephone.postMessage(tel)
      } else if (this.commonJs.checkTerminal() == 'android') {
        ZMParentsJsToAndroid.CallTelephone(tel)
        setTimeout(() => {
          this.blurAdjust()
        }, 50)
      } else {
        window.location.href = 'tel://' + tel
      }
    },
    goweb(website, shcoolname, feature, icon) {
      // let obj={
      // 	web:website,
      // 	shcoolname:shcoolname,
      // 	feature:feature,
      // 	icon:icon
      // }
      // this.$router.push({path: 'iframebox?web='+website+'&shcoolname='+shcoolname+'&feature='+feature+'&icon='+icon})
      window.location.href = website
    },
    goback() {
      backAppOrWx()
    },
    //安卓,IOS方法
    follow(datas) {
      followUser({
        academyCode: this.academyCode,
        action: datas.followStatus,
        fromUserId: ls.get('yxkData').userId,
      })
        .then((res) => {
          if (res.code === '0') {
            datas.followStatus === 1 ? (datas.followStatus = 0) : (datas.followStatus = 1)
            let obj = {
              type: this.univData.followStatus + '',
              academyCode: this.academyCode,
            }
            if (this.commonJs.checkTerminal() == 'ios') {
              window.webkit.messageHandlers.getFollowMsg.postMessage(obj)
            } else if (this.commonJs.checkTerminal() == 'android') {
              obj = JSON.stringify(obj)
              ZMParentsJsToAndroid.getFollowMsg(obj)
            } else {
              let $index = this.$store.state.followIndex
              let sersData = JSON.parse(sessionStorage.getItem('serListData'))
              let obData = JSON.parse(sessionStorage.getItem('yxkListData'))
              obData.forEach((item) => {
                if (item.academyCode == this.academyCode) {
                  item.followStatus = datas.followStatus
                }
              })
              if (sersData) {
                sersData.forEach((item) => {
                  if (item.academyCode == this.academyCode) {
                    item.followStatus = datas.followStatus
                  }
                })
              }
              setTimeout(() => {
                if (sersData) {
                  sessionStorage.setItem('serListData', JSON.stringify(sersData))
                }
                sessionStorage.setItem('yxkListData', JSON.stringify(obData))
              }, 20)
            }
          }
          this.$vux.toast.text(res.message)
        })
        .catch((error) => {})
    },
    goUrl(url) {
      window.location.href = 'http://' + url
    },
    academyServiceDetail() {
      this.$loading('open')
      academyServiceDetail(
        {
          academyCode: this.academyCode,
          fromUser: ls.get('yxkData').userId,
        },
        true
      )
        .then((res) => {
          if (res.code === '0') {
            this.univData = res.data
            this.schoolAdress = res.data.address
            this.schoolName = res.data.academyName
            this.schoolWeb = res.data.website
            if (res.data.image) {
              this.showBannerImg = true
            } else {
              this.showBannerImg = false
            }

            setTimeout(() => {
              this.tabTops = this.$refs.boxHeight.offsetHeight
            }, 50)
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
        .finally(() => {
          this.$hideLoading()
          this.$nextTick(() => {
            this.showPage = true
          })
        })
    },
    tabChange(tab) {
      if (ls.get('userArea') == '浙江') {
        if (tab == 'select3') {
          this.tabView = 'select5'
        } else {
          this.tabView = tab
        }
      } else {
        this.tabView = tab
      }
    },
    tab(index) {
      this.num = index
    },
    crimp() {
      this.showBot1 = !this.showBot1
      this.collsMuen = !this.collsMuen
      let _this = this
      setTimeout(function() {
        _this.tabTops = _this.$refs.boxHeight.offsetHeight
      }, 400)
    },
    onItemClick(index) {
      this.tabIndex = index
      index === 1 ? this.goto('admission') : index === 2 ? this.goto('major') : ''
    },
    showLoading() {
      this.$loading('open')
      setTimeout(() => {
        this.$hideLoading()
      }, 2000)
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
  },
  mounted: function() {
    this.$visit('Academy/' + this.commonJs.GetUrlParam('academyCode'))
    this.academyServiceDetail()
    this.timer = setInterval(() => {
      let scrolly = this.$refs.scrollerBottom.getPosition().top
      if (scrolly > this.tabTops) {
        this.syStyle = false
      } else {
        this.syStyle = true
      }
    }, 50)
  },
  created() {
    if (ls.get('tokensyxk')) {
      this.academyCode = this.commonJs.GetUrlParam('academyCode')
      return false
    }
    if (this.commonJs.checkTerminal() == 'ios') {
      let iOSInfos = window.iOSInfo
      if (Object.keys(iOSInfos).length > 0) {
        ls.set('yxkData', iOSInfos)
        ls.set('tokensyxk', iOSInfos.tokens)
        ls.set('userArea', iOSInfos.userArea)
        this.academyCode = iOSInfos.academyCode
      }
    } else if (this.commonJs.checkTerminal() == 'android') {
      let data = window.ZMParentsJsToAndroid.getSchoolMsg()
      let androidData = JSON.parse(data)
      ls.set('yxkData', androidData)
      ls.set('tokensyxk', androidData.tokens)
      ls.set('userArea', androidData.userArea)
      this.academyCode = androidData.academyCode
    } else {
      this.academyCode = this.commonJs.GetUrlParam('academyCode')
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === '/yxk/recruitDetail') {
        vm.tabView = 'select4'
        vm.num = 3
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer)
    next()
  },
}
</script>

<style scoped lang="less">
.shadow-back {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .backboxs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 6.9rem;
    height: 0.8rem;
    padding: 0.2rem 0;
  }
  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
    vertical-align: middle;
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size: 3rem 2.4rem;
  }

  .back {
    display: inline-block;
    margin-left: 0.1rem;
    font-weight: bold;
    color: #222;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.whites {
  background: #fff;
}
.univDetailWrap {
  width: 7.5rem;
  min-height: 100vh;
  height: auto;

  .abcdImg {
    width: 100%;
    height: 3.8rem;
    border: none;

    .unviBg {
      width: 100%;
      height: 3.8rem;
      display: block;
      background: url('~/static/header.png') no-repeat;
      background-size: 100% 100%;
    }

    .backTs {
      position: absolute;
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      left: 0.3rem;
      top: 0.2rem;
      text-align: center;
      line-height: 0.5rem;

      .imgIcon {
        display: block;
        margin: 0.05rem auto;
        width: 0.4rem;
        height: 0.4rem;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.7rem -0.1rem;
        background-size: 3rem 2.4rem;
      }
    }
  }

  .back {
    width: 100%;
  }

  .univDetail {
    width: 100%;
    height: auto;

    .topWrap {
      width: 100%;
      height: auto;
      padding: 0 0.3rem 0.4rem;
      box-sizing: border-box;

      .univBar {
        width: 6.9rem;
        height: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
        border-radius: 0.2rem;
        overflow: hidden;
        transition: all 0.35s;

        .univTopBar {
          width: 6.9rem;
          height: auto;
          padding: 0 0.3rem 0.2rem;
          box-sizing: border-box;
          position: relative;

          .left {
            width: 1.5rem;
            height: 2.24rem;

            img {
              display: block;
              width: 1.2rem;
              height: 1.2rem;
              margin-top: 0.5rem;
              border-radius: 50%;
              border: none;
              background: url('~/static/iconheader.png') no-repeat;
              background-size: 100%;
            }
          }

          .right {
            height: auto;

            .sp1 {
              width: 3.7rem;
              display: block;
              height: auto;
              margin-top: 0.4rem;
              font-family: 'PingFang-SC-Bold';
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
            }

            .sp2 {
              display: block;
              font-size: 0.26rem;
              font-family: 'PingFang-SC-Bold';
              font-weight: bold;
              color: rgba(153, 153, 153, 1);
              line-height: 0.4rem;
              margin-top: 0.2rem;
            }
          }

          .sp0 {
            position: absolute;
            right: 0.3rem;
            top: 0.3rem;
            width: 1.1rem;
            height: 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.26rem;
            font-family: 'PingFang-SC-Bold';
            font-weight: bold;
            line-height: 0.46rem;
            text-align: center;
          }

          .sp3 {
            color: @mainColor;
            border: 0.02rem solid @mainColor;
            box-sizing: border-box;
          }

          .sp4 {
            background: #fafafa;
            color: #bbbbbb;
          }
        }

        .univBotBar {
          width: 6.3rem;
          padding: 0.2rem 0;
          height: auto;
          background: rgba(250, 250, 250, 1);
          border-radius: 0.1rem;
          margin: 0 auto 0.2rem;
          overflow: hidden;
          min-height: 2rem;
          span {
            padding-left: 0.3rem;
            box-sizing: border-box;
            margin-top: 0.15rem;
            height: 0.42rem;
            line-height: 0.42rem;

            .imgIcon {
              display: inline-block;
              width: 0.32rem;
              height: 0.32rem;
            }
            .icon_phone {
              background: url('~@/static/sprite/other_sprites.png') -3.55rem -3.2rem;
              background-size: 4.68rem 4.08rem;
            }
            .icon_add {
              background: url('~@/static/sprite/other_sprites.png') -2.5rem -3.2rem;
              background-size: 4.68rem 4.08rem;
            }
            .icon_network {
              background: url('~@/static/sprite/other_sprites.png') -3rem -3.2rem;
              background-size: 4.68rem 4.08rem;
            }

            b,
            a {
              font-size: 0.26rem;
              font-family: 'PingFang-SC-Bold';
              color: rgba(102, 102, 102, 1);
              line-height: 0.3rem;
              margin-left: 0.1rem;
            }

            a {
              text-decoration: none;
            }
          }

          .univspn {
            height: auto;
            align-items: initial;
          }
        }
      }

      .univCollHei {
        height: auto;
      }

      .collagesBox {
        width: 6.7rem;
        background: @mainColor;
        height: 0.6rem;
        border-bottom-left-radius: 0.2rem;
        border-bottom-right-radius: 0.2rem;
        margin: 0 auto;
        padding: 0 0.3rem;
        box-sizing: border-box;

        .co1 {
          font-size: 0.3rem;
          font-family: 'PingFang-SC-Bold';
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
        }

        .co2 {
          overflow: hidden;

          .imgIcon {
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.1rem;
          }
          .collsimg1 {
            display: inline-block;
            background: url('~@/static/sprite/icon_sprites_40.png') -0.7rem -0.7rem;
            background-size: 3rem 2.4rem;
          }
          .collsimg2 {
            display: inline-block;
            background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.1rem;
            background-size: 3rem 2.4rem;
          }
        }
      }
    }
  }
}

.botWrap {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
  background: #f9f9f9;
  z-index: 2;

  .tabs {
    width: 100%;
    height: 0.7rem;

    // background: yellow;
    span {
      font-size: 0.3rem;
      text-align: center;
      font-weight: bold;
      color: #bbbbbb;
      height: 0.7rem;
      line-height: 0.7rem;
    }

    .active {
      color: #1d1e22;
      background: rgba(255, 255, 255, 1);
      // box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
      border-radius: 0.1rem 0.1rem 0px 0px;
    }
  }
}

.botWrap1 {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
  background: #fff;
  z-index: 2;

  .tabs1 {
    width: 100%;
    height: 0.7rem;

    // background: yellow;
    span {
      font-size: 0.3rem;
      text-align: center;
      font-weight: bold;
      color: #bbbbbb;
      height: 0.7rem;
      line-height: 0.7rem;
      position: relative;
    }

    .active {
      color: #1d1e22;
    }

    .active::after {
      content: '';
      display: block;
      width: 20%;
      height: 4px;
      background: @mainColor;
      position: absolute;
      bottom: 0;
      left: 40%;
    }
  }
}
</style>
